<template>
  <el-dialog
    :model-value="dialogRemoval"
    width="25%"
    :before-close="handleClose"
  >
    <template #header>
      <h3 style="padding-bottom: 10px">社群下架</h3>
    </template>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
      <el-form-item label="是否下架" prop="ConfirmRemoval">
        <el-input
          v-model="form.ConfirmRemoval"
          placeholder="请输入'确认下架'"
          v-noSpace
        />
      </el-form-item>
    </el-form>
    <el-alert
      title="社群下架后，该社群将不在APP上展示，所有用户将不再看到该社群及其下的活动信息，所有已加入该社群的用户被解散。"
      type="warning"
      show-icon
      :closable="false"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { updateCommunityStatus } from '@/api/Association/ment';
// 添加用户数据
const form = ref({
  ConfirmRemoval: '',
});
// 校验规则
const formRef = ref(null);
const validateConfirmText = (rule, value, callback) => {
  if (value !== '确认下架') {
    callback(new Error('请输入“确认下架”以确认操作')); // 校验失败
  } else {
    callback(); // 校验通过
  }
};
const rules = {
  ConfirmRemoval: [
    { required: true, message: '此项为必填项' },
    { validator: validateConfirmText, trigger: 'blur' }, // 自定义校验规则
  ],
};

// 定义 props，接收父组件传递的数据
const props = defineProps({
  dialogRemoval: {
    type: Boolean,
  },
  communityId: {
    type: String,
  },
});

// 定义 emits，向父组件发送事件
const emit = defineEmits(['confirm', 'cancel']);

// 处理取消按钮的点击事件
const handleCancel = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  form.value = {};
  emit('cancel');
};

// 处理确认按钮的点击事件
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await updateCommunityStatus(props.communityId);
      if (res.data.code === 200) {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: '下架成功',
          type: 'success',
        });
        emit('confirm');
        handleClose();
      } else {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: res.data.msg,
          type: 'error',
        });
      }
    }
  });
};
// 关闭对话框
const handleClose = () => {
  handleCancel();
};
onMounted(() => {});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
